<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .userInfo{
            display: flex;
            justify-content: space-between;
            padding: 16px 20px;
            align-items: center;
        }
        .card{
            margin: 20px;
            display: flex;
            overflow-x: scroll;
        }
        .card>li{
            margin-right: 6px;
            border-radius: 15px;
            width: 95%;
            height: 150px;
            background-color: #5f73c6;
            flex-shrink: 0;
        }

        .li1>p{
            color: #e8e8e8;
            margin-left: 20px;
        }
        .li1>:first-child{
            font-size: 20px;
            margin-top: 25px;
        }
        .li1>:nth-child(2){
            font-size: 12px;
            margin: 10px 0 10px 20px;
        }
        .li1>:last-child{
            font-size: 26px;
        }
        .￥{
            display: flex;
            justify-content: space-between;
            margin: 10px 20px;
            height: 20px;
            line-height: 20px;
        }
        .btn{
            margin: 20px auto;
            width: 335px;
            height: 35px;
            line-height: 35px;
            display: flex;
            justify-content: space-between;
            text-align: center;
            font-size: 12px;
        }
        .btn>:first-child{
            border: 1px solid #5f73c6;
            color: #5f73c6;
            width: 80px;
        }
        .btn>:nth-child(2){
            border: 1px solid #5f73c6;
            color: #5f73c6;
            width: 80px;
            margin-left: -15px;
        }
        .btn>:last-child{
            width: 140px;
            background-color: #5f73c6;
            color: white;
        }
        .leg{
            width: 335px;
            margin: 0 auto;
        }
        .leg img{
            width: 20px;
            height: 20px;
            margin: auto 0;
        }
        .leg>li{
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="userInfo">
    <img width="50" height="50" src="https://m.360buyimg.com/babel/jfs/t1/57014/6/10297/815/5d773a07Ec7a61fc9/97917a2daa34be0f.png">
    <div style="margin-left: -70px">
        <h3>1383838438</h3>
        <p style="margin-top: 6px; font-size: 14px; color: #999999;">UID:3838438</p>
    </div>
    <h6 style="color: #5f73c6; font-size: 14px">资产信息</h6>
</div>
<ul class="card">
    <li class="li1">
        <p>平台账户（USDT） 👁</p>
        <p>总资产</p>
        <p>3838438</p>
    </li>
    <li class="li1">
        <p>平台账户（USDT） 👁</p>
        <p>总资产</p>
        <p>3838438</p>
    </li>
</ul>
<div class="￥">
    <p><span style="font-size: 12px">可用：</span>+3838438</p>
    <p><span style="font-size: 12px">交易冻结：</span>3838438</p>
</div>
<ul class="btn">
    <li>充币</li>
    <li>提币</li>
    <li>资金划转</li>
</ul>
<ul class="leg">
    <li>
        邀请返佣
        <img src="img/礼物.png">
    </li>
    <hr />
    <li>
        实名认证
        <span style="margin-left: -180px; font-size: 14px; color: #999999" >未实名</span>
        <img src="img/id-card.png">
    </li>
    <hr />
    <li>
        银行卡绑定
        <span style="margin-left: -170px; font-size: 14px; color: #5f73c6">已绑定</span>
        <img src="img/银行卡.png">
    </li>
    <hr />
    <li>
        分发记录
        <img src="img/记录.png">
    </li>
    <hr />
    <li>
        在线客服
        <img src="img/_消息.png">
    </li>
    <hr />
    <li>
        安全中心
        <img src="img/安全中心.png">
    </li>
</ul>
</body>
</html>